import React, { Component } from 'react';
import Swiper from 'react-id-swiper';
import Image from 'react-uwp/Image';
export default class GalleryImage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gallerySwiper: null,
      thumbnailSwiper: null
    };

    this.galleryRef = this.galleryRef.bind(this);
    this.thumbRef = this.thumbRef.bind(this);
  }

  componentWillUpdate(nextProps, nextState) {
    if (nextState.gallerySwiper && nextState.thumbnailSwiper) {
      const { gallerySwiper, thumbnailSwiper } = nextState;

      gallerySwiper.controller.control = thumbnailSwiper;
      thumbnailSwiper.controller.control = gallerySwiper;
    }
  }

  galleryRef(ref) {
    if (ref) this.setState({ gallerySwiper: ref.swiper });
  }

  thumbRef(ref) {
    if (ref) this.setState({ thumbnailSwiper: ref.swiper });
  }

  render() {
    const gallerySwiperParams = {
      spaceBetween: 12,
      initialSlide: 2
    };

    const thumbnailSwiperParams = {
      spaceBetween: 12,
      centeredSlides: true, //注释会导致联动不了？？ 加上initialSlide
      slidesPerView: 'auto',
      touchRatio: 0.2,
      initialSlide: 2,
      slideToClickedSlide: true
    };
    const galleryList = [
      'https://p1-q.mafengwo.net/s12/M00/42/7A/wKgED1wF6mqAOswkAAfS3Veeuqg31.jpeg',
      'https://p2-q.mafengwo.net/s12/M00/55/B4/wKgED1wBA0uAWbQLAAcMt7ivOZI74.jpeg',
      'https://p1-q.mafengwo.net/s12/M00/42/7A/wKgED1wF6mqAOswkAAfS3Veeuqg31.jpeg',
      'https://p2-q.mafengwo.net/s12/M00/55/B4/wKgED1wBA0uAWbQLAAcMt7ivOZI74.jpeg'
    ];
    const ThumbnailList = ['', '', '', ''];
    return (
      <div className="gallery" style={{ width: '16rem' }}>
        <Swiper {...gallerySwiperParams} ref={this.galleryRef}>
          {galleryList.map((item, index) => {
            return (
              <div
                key={index}
                style={{
                  width: '16rem',
                  height: '10.68rem',
                  background: '#e5e5e5'
                }}
              >
                <Image src={item} className="imgCover" />
              </div>
            );
          })}
        </Swiper>
        <Swiper {...thumbnailSwiperParams} ref={this.thumbRef}>
          {galleryList.map((item, index) => {
            return (
              <div
                key={index}
                style={{
                  width: '2.88rem',
                  height: '1.92rem',
                  background: '#e5e5e5'
                }}
              >
                <Image src={item} className="imgCover" />
              </div>
            );
          })}
        </Swiper>
      </div>
    );
  }
}
